img {
  background-color: skyblue;
}

/* 列表样式 */
.list {
  /* 去除小点 */
  list-style: none;
  padding: 0;
  display: flex;
}

.list li {
  margin: 0 20px;
  padding: 5px 10px;
}

.list li:hover {
  /* 鼠标移入 */
  background-color: skyblue;
  border-radius: 20px;
  color: orange;
}

/* a标签实现按钮 */
.a-btn {
  background-color: #5b9cf5;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  /* 去掉 a 标签的下划线 */
  text-decoration: none;
}
.a-btn:hover {
  background-color: #edf5fe;
  color: #5b9cf5;
  border: 1px solid #5b9cf5;
}

/* div标签实现按钮 */
.div-btn {
  background-color: #5b9cf5;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  /* 去掉 a 标签的下划线 */
  text-decoration: none;
  margin: 30px;
  width: 80px;
  text-align: center;
  /* 鼠标悬停外观 */
  cursor: not-allowed;
}
.div-btn:hover {
  background-color: #edf5fe;
  color: #5b9cf5;
  border: 1px solid #5b9cf5;
}

/* button标签实现按钮 */
.button-btn {
  background-color: #5b9cf5;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  /* 去掉 a 标签的下划线 */
  text-decoration: none;
  border: 1px solid #5b9cf5;
}
.button-btn:hover {
  background-color: #edf5fe;
  color: #5b9cf5;
  border: 1px solid #5b9cf5;
}

/* p标签实现按钮 */
.p-btn {
  background-color: #5b9cf5;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;

  border: 1px solid #5b9cf5;
  width: 80px;
  cursor: pointer;
}
.p-btn:hover {
  background-color: #edf5fe;
  color: #5b9cf5;
  border: 1px solid #5b9cf5;
}

/* h标签实现按钮 */
.h-btn {
  background-color: lightgreen;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid lightgreen;
  width: 80px;
  font-size: 16px;
  font-weight: normal;
  cursor: help;
}
.h-btn:hover {
  background-color: purple;
  color: lightgreen;
  border: 1px solid #5b9cf5;
}
